<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: html}">
<head>
    <title>首页 - 诗词平台</title>
</head>
<body>
<div th:fragment="content">
    <div class="jumbotron text-center py-5">
        <h1 class="display-4">欢迎来到诗词平台</h1>
        <p class="lead">这里是诗词爱好者的交流天地</p>
        <hr class="my-4">
        <p>浏览精选诗词，分享你的创作，与其他诗词爱好者交流。</p>
        <a class="btn btn-primary btn-lg" href="/poems" role="button">开始浏览</a>
    </div>

    <div class="row mt-5">
        <div class="col-md-4">
            <h3>最新诗词</h3>
            <div class="list-group">
                <a th:each="poem : ${latestPoems}"
                   th:href="@{/poems/{id}(id=${poem.id})}"
                   class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1" th:text="${poem.title}">诗词标题</h5>
                        <small th:text="${#temporals.format(poem.createdAt, 'yyyy-MM-dd')}">日期</small>
                    </div>
                    <p class="mb-1" th:text="${poem.author.username}">作者</p>
                </a>
            </div>
        </div>

        <div class="col-md-4">
            <h3>热门诗词</h3>
            <div class="list-group">
                <a th:each="poem : ${popularPoems}"
                   th:href="@{/poems/{id}(id=${poem.id})}"
                   class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1" th:text="${poem.title}">诗词标题</h5>
                        <small th:text="${poem.likeCount + ' 赞'}">点赞数</small>
                    </div>
                    <p class="mb-1" th:text="${poem.author.username}">作者</p>
                </a>
            </div>
        </div>

        <div class="col-md-4">
            <h3>分类浏览</h3>
            <div class="list-group">
                <a th:each="category : ${categories}"
                   th:href="@{/poems/category/{id}(id=${category.id})}"
                   class="list-group-item list-group-item-action">
                    <h5 class="mb-1" th:text="${category.name}">分类名称</h5>
                    <p class="mb-1" th:text="${category.description}">分类描述</p>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html> 